<!-- 新增、编辑 -->

<template>
    <el-dialog :model-value="dialogFormVisible" :destroy-on-close="true" :title="dialogTitle" width="600px"
        @close="emits('closeDialog')">
        <el-form ref="dialogFormRef" :model="dialogForm" :label-width="formLabelWidth" :rules="rules">
            <el-form-item label="公司主体" :label-width="formLabelWidth" prop="sys_company_id">
                <el-select clearable v-model="dialogForm.sys_company_id" placeholder="公司主体">
                        <el-option
                            v-for="item in companyListData"
                            :key="item.id"
                            :label="item.company_name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
            </el-form-item>
            <el-form-item label="账号类型" :label-width="formLabelWidth" prop="card_type">
                <el-select clearable v-model="dialogForm.card_type" placeholder="账号类型">
                    <el-option key="receive" label="收款" value="receive"></el-option>
                    <el-option key="send" label="付款" value="send"></el-option>
                    <el-option key="both" label="收款+付款" value="both"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="账号名称" :label-width="formLabelWidth" prop="name">
                <el-input v-model="dialogForm.name" placeholder="请输入账户的简要说明" />
            </el-form-item>
            <el-form-item label="国家" :label-width="formLabelWidth" prop="country">
                <el-input v-model="dialogForm.country" />
            </el-form-item>
            <el-form-item label="银行名称" :label-width="formLabelWidth" prop="bank">
                <el-input v-model="dialogForm.bank" />
            </el-form-item>
            <el-form-item label="支行名称" :label-width="formLabelWidth" prop="branch">
                <el-input v-model="dialogForm.branch" />
            </el-form-item>
            <el-form-item label="银行地址" :label-width="formLabelWidth" prop="address">
                <el-input v-model="dialogForm.address" />
            </el-form-item>
            <el-form-item label="银行账号" :label-width="formLabelWidth" prop="card_number">
                <el-input v-model="dialogForm.card_number" />
            </el-form-item>
            <el-form-item label="收款人名称" :label-width="formLabelWidth" prop="card_name">
                <el-input v-model="dialogForm.card_name" />
            </el-form-item>
            <el-form-item label="Swift码" :label-width="formLabelWidth" prop="swift_code">
                <el-input v-model="dialogForm.swift_code" />
            </el-form-item>
            <el-form-item label="支持币种" :label-width="formLabelWidth" prop="currency">
                <el-input v-model="dialogForm.currency" placeholder="多个币种用英文逗号分割" />
            </el-form-item>
            <el-form-item label="银行路由号码" :label-width="formLabelWidth">
                <el-input v-model="dialogForm.routing_number" />
            </el-form-item>
            <el-form-item label="预留手机号" :label-width="formLabelWidth">
                <el-input v-model="dialogForm.phone" />
            </el-form-item>
            <el-form-item label="预留邮箱" :label-width="formLabelWidth">
                <el-input v-model="dialogForm.email" />
            </el-form-item>
            <el-form-item label="银行补充信息" :label-width="formLabelWidth">
                <el-input v-model="dialogForm.extended" type="textarea" rows="3" />
            </el-form-item>
            <el-form-item label="是否可用" :label-width="formLabelWidth" prop="is_active">
                <el-select v-model="dialogForm.is_active" placeholder="是否可用">
                    <el-option label="可用" :value="1"></el-option>
                    <el-option label="不可用" :value="0"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="emits('cancel')">取消</el-button>
                <el-button type="primary" @click="submit(dialogForm)" :loading="btnLoading">提交</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref } from "vue";

const dialogFormRef = ref(null);

defineProps({
    dialogFormVisible: {
        type: Boolean,
        default: false
    },
    dialogForm: {
        type: Object,
        default: {
            id: "",
            sys_company_id: "",
            card_type: "",
            is_active: "",
            name: "",
            country: "",
            bank: "",
            branch: "",
            address: "",
            card_number: "",
            card_name: "",
            swift_code: "",
            currency: "",
            phone: "",
            email: "",
            extended: ""
        }
    },
    btnLoading: {
        type: Boolean,
        default: false
    },
    dialogTitle: {
        type: String,
        default: ""
    },
    companyListData: {type: Array, default: []}
});
const emits = defineEmits(["closeDialog", "cancel", "submitForm"]);

const formLabelWidth = "140px";
// 校验
const rules = {
    sys_company_id: [{ required: true, message: "请选择公司主体", trigger: "blur" }],
    card_type: [{ required: true, message: "请选择账号类型", trigger: "blur" }],
    name: [{ required: true, message: "请输入账号简要说明", trigger: "blur" }],
    country: [{ required: true, message: "请输入国家", trigger: "blur" }],
    bank: [{ required: true, message: "请输入银行名称", trigger: "blur" }],
    address: [{ required: true, message: "请输入银行地址", trigger: "blur" }],
    card_number: [{ required: true, message: "请输入银行账号", trigger: "blur" }],
    card_name: [{ required: true, message: "请输入收款人名称", trigger: "blur" }],
    currency: [{ required: true, message: "请输入支持币种，多个币种用英文逗号分割", trigger: "blur" }],
};
// 提交
const submit = dialogForm => {
    dialogFormRef.value
        .validate()
        .then(async () => {
            try {
                emits("submitForm", dialogForm);
            } catch (error) {
                return false;
            }
        })
        .catch(error => {
            return false;
        });
};
</script>
  